<template>
  <div class="spu-container">
    <el-card style="margin: 20px 0">
      <CategorySelect
        :disabled="currentView !== 'OperateSpu'"
        @get-attr="onGetAttr"
      />
    </el-card>
    <el-card>
      <keep-alive :include="['OperateSpu']">
        <component
          :is="currentView"
          ref="dynamicComponent"
          :spu-list="spuList"
          :category3-id="category3Id"
          :total="total"
          @edit-success="onEditSuccess"
          @add-edit-spu="addOrEditSpu"
          @change-skuform="onChangeSkuForm"
          @cancel="currentView = 'OperateSpu'"
        />
      </keep-alive>
    </el-card>
  </div>
</template>

<script>
import CategorySelect from 'components/categorySelector'
import OperateSpu from './spuManageChild/OperateSpu'
import AddEditSpu from './spuManageChild/AddEditSpu'
import SkuForm from './spuManageChild/SkuForm'
import { getSpuList } from 'api/spu'

export default {
  name: 'SpuManage',
  components: {
    CategorySelect,
    OperateSpu,
    AddEditSpu,
    SkuForm
  },

  props: {},
  data() {
    return {
      spuList: [],
      category3Id: '',
      currentView: 'OperateSpu',
      total: 0,
      categoryIds: {},
      skuId: ''
    }
  },
  provide() {
    return {
      spuManage: this
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 得到分类id
    onGetAttr(categoryIds) {
      this.category3Id = categoryIds.category3Id
      this.categoryIds = categoryIds
      this.onGetSpuList()
    },
    // 得到spu列表
    onGetSpuList() {
      const { category3Id } = this
      // 能够拿到spu列表说明当前组件肯定是OperateSpu,这时候拿到它的页码和当前每页数量
      this.$nextTick(async() => {
        const { currentPage, pageSize } = this.$refs.dynamicComponent
        const { data: res } = await getSpuList(
          currentPage,
          pageSize,
          category3Id
        )
        this.spuList = res.records
        this.total = res.total
      })
    },
    // 添加或者编辑spu
    addOrEditSpu() {
      this.currentView = 'AddEditSpu'
    },
    onEditSuccess() {
      this.currentView = 'OperateSpu'
      this.onGetSpuList()
    },
    onChangeSkuForm(row) {
      this.skuId = row.id
      this.currentView = 'SkuForm'
    }
  }
}
</script>

<style scoped lang="scss"></style>
